<template>
  <div class="ai-recommendations-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>AI智能电影推荐</h1>
      <p>基于您的喜好和观看历史，AI为您精选优质电影</p>
    </div>

    <!-- AI搜索区域 -->
    <div class="ai-search-section">
      <div class="ai-search-header">
        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.08-.3-.14-.61-.14-.93 0-2.42 1.75-4.44 4-4.94V3h-4.01C10.8 3 9 4.8 9 7c0 2.21 1.79 4 4 4 1.19 0 2.26-.55 2.97-1.43l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.99-2.01 5-5 5z" 
                fill="#007bff" opacity="0.1"/>
        </svg>
        <h2>智能电影搜索</h2>
      </div>
      <div class="search-input-wrapper">
        <input 
          v-model="searchQuery"
          type="text"
          placeholder="搜索电影、导演、演员或标签..."
          class="ai-search-input"
          @input="searchMovies(searchQuery)"
          @keyup.enter="searchMovies(searchQuery)"
        />
        <button 
          @click="searchMovies(searchQuery)"
          class="search-btn"
          :disabled="isSearching"
        >
          {{ isSearching ? '搜索中...' : '搜索' }}
        </button>
      </div>
      
      <!-- 搜索结果 -->
      <div v-if="searchResults.length > 0" class="search-results">
        <h3>搜索结果 ({{ searchResults.length }})</h3>
        <div class="search-results-grid">
          <div 
            v-for="result in searchResults" 
            :key="result.id"
            class="search-result-card"
            @click="goToVideo(result.id)"
          >
            <!-- SVG缩略图 -->
            <div class="thumbnail-container">
              <svg width="100%" height="100%" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="url(#searchThumbnailGradient)"/>
                <circle cx="100" cy="60" r="15" fill="rgba(255,255,255,0.8)" opacity="0.6"/>
                <polygon points="93,54 107,60 93,66" fill="white"/>
                <text x="50%" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">
                  {{ result.title.substring(0, 8) }}
                </text>
                <defs>
                  <linearGradient id="searchThumbnailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#007bff"/>
                    <stop offset="100%" stop-color="#0056b3"/>
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <div class="search-result-info">
              <h4 class="search-result-title">{{ result.title }}</h4>
              <p class="search-result-director">导演：{{ result.director }}</p>
              <div class="search-result-tags">
                <span v-for="tag in (result.tags || [])" :key="tag" class="tag">{{ tag }}</span>
              </div>
              <div class="search-result-stats">
                <span class="search-result-rating">评分：{{ result.rating || '暂无' }}</span>
                <span class="search-result-views">观看：{{ formatViews(result.views || 0) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else-if="searchQuery && !isSearching" class="no-search-results">
        <p>没有找到相关电影，请尝试其他关键词</p>
      </div>
    </div>

    <!-- AI推荐区域 -->
    <div class="ai-recommendations-section">
      <div class="section-header">
        <div class="section-title">
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" fill="#007bff" opacity="0.1"/>
            <path d="M12 8v4M12 16h0" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
            <path d="M8 12l8 0" stroke="#007bff" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <h2>为您推荐</h2>
        </div>
        <button @click="refreshRecommendations" class="refresh-btn" :disabled="isLoadingRecommendations">
          <svg v-if="!isLoadingRecommendations" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" fill="currentColor"/>
            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" fill="currentColor"/>
          </svg>
          {{ isLoadingRecommendations ? '更新中...' : '刷新推荐' }}
        </button>
      </div>
      
      <!-- AI分析摘要 -->
      <div class="ai-analysis-summary">
        <p class="ai-analysis-text">{{ aiAnalysis?.analysis || 'AI正在分析电影偏好...' }}</p>
        <div class="ai-summary-stats">
          <div class="ai-summary-stat">
            <span class="stat-value">{{ aiAnalysis?.confidence || '--' }}</span>
            <span class="stat-label">推荐置信度</span>
          </div>
          <div class="ai-summary-stat">
            <span class="stat-value">{{ aiAnalysis?.genreMatch || '--' }}</span>
            <span class="stat-label">风格匹配度</span>
          </div>
        </div>
      </div>
      
      <!-- 推荐加载状态 -->
      <div v-if="isLoadingRecommendations" class="recommendations-loading">
        <div class="loading-spinner"></div>
        <p>AI正在为您精选电影...</p>
      </div>
      
      <!-- 推荐列表 -->
      <div v-else class="ai-recommendations-grid">
        <div 
          v-for="movie in aiRecommendedMovies" 
          :key="movie.id"
          class="ai-recommendation-card"
          @click="goToVideo(movie.id)"
        >
          <!-- 推荐电影卡片 -->
          <div class="recommendation-thumbnail">
            <svg width="100%" height="100%" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
              <rect width="100%" height="100%" fill="url(#recThumbnailGradient)"/>
              <circle cx="100" cy="60" r="15" fill="rgba(255,255,255,0.8)" opacity="0.6"/>
              <polygon points="93,54 107,60 93,66" fill="white"/>
              <text x="50%" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">
                {{ movie.title.substring(0, 8) }}
              </text>
              <defs>
                <linearGradient id="recThumbnailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#28a745"/>
                  <stop offset="100%" stop-color="#1e7e34"/>
                </linearGradient>
              </defs>
            </svg>
            <div class="similarity-badge">
              <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" fill="currentColor"/>
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" fill="currentColor"/>
              </svg>
              {{ movie.similarity }}%
            </div>
          </div>
          <div class="recommendation-info">
            <h3 class="recommendation-title">{{ movie.title }}</h3>
            <p class="recommendation-director">导演：{{ movie.director }}</p>
            <div class="recommendation-meta">
              <span class="recommendation-rating">⭐ {{ movie.rating || '暂无评分' }}</span>
              <span class="recommendation-views">{{ formatViews(movie.views || 0) }}</span>
            </div>
            <div class="recommendation-tags">
              <span v-for="tag in (movie.tags || [])" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="aiRecommendedMovies.length === 0 && !isLoadingRecommendations" class="no-recommendations">
        <p>暂无推荐内容</p>
        <button @click="refreshRecommendations" class="primary-btn">获取推荐</button>
      </div>
    </div>

    <!-- 热门类别 -->
    <div class="popular-categories">
      <h2>热门类别</h2>
      <div class="categories-grid">
        <div v-for="category in popularCategories" :key="category" class="category-card" @click="searchMovies(category)">
          <div class="category-icon">
            <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
              <rect width="100%" height="100%" rx="8" fill="url(#categoryGradient)"/>
              <path d="M20 12v8M16 20h8" stroke="white" stroke-width="2" stroke-linecap="round"/>
              <defs>
                <linearGradient id="categoryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#007bff"/>
                  <stop offset="100%" stop-color="#0056b3"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <span class="category-name">{{ category }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 导入视频服务
import { getAllVideos } from '../services/video.js'

const router = useRouter()

// 状态变量
const aiRecommendedMovies = ref([]) // AI推荐电影列表
const aiAnalysis = ref(null) // AI对当前电影的分析
const isLoadingRecommendations = ref(false) // 是否正在加载推荐
const searchQuery = ref('') // 搜索查询词
const searchResults = ref([]) // 搜索结果
const isSearching = ref(false) // 是否正在搜索

// 热门类别
const popularCategories = [
  '动作', '喜剧', '爱情', '科幻', '悬疑', '恐怖', '纪录片', '动画'
]

// 跳转到视频详情页
const goToVideo = (videoId) => {
  router.push(`/video/${videoId}`)
}

// 格式化观看次数
const formatViews = (views) => {
  if (views >= 10000) {
    return `${(views / 10000).toFixed(1)}万`
  } else if (views >= 1000) {
    return `${(views / 1000).toFixed(1)}k`
  }
  return views.toString()
}

// AI电影搜索功能
const searchMovies = async (query) => {
  if (!query.trim()) {
    searchResults.value = []
    return
  }
  
  isSearching.value = true
  try {
    // 模拟搜索延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 搜索逻辑：基于标题、描述、标签等多维度匹配
    const queryLower = query.toLowerCase()
    const results = getAllVideos()
      .filter(movie => 
        movie.title.toLowerCase().includes(queryLower) ||
        movie.description.toLowerCase().includes(queryLower) ||
        (movie.tags && movie.tags.some(tag => tag.toLowerCase().includes(queryLower))) ||
        movie.director.toLowerCase().includes(queryLower) ||
        (movie.actors && movie.actors.some(actor => actor.toLowerCase().includes(queryLower)))
      )
      .sort((a, b) => {
        // 基于匹配程度排序
        const aScore = calculateMatchScore(a, queryLower)
        const bScore = calculateMatchScore(b, queryLower)
        return bScore - aScore
      })
    
    searchResults.value = results
  } catch (error) {
    console.error('搜索失败:', error)
  } finally {
    isSearching.value = false
  }
}

// 计算搜索匹配分数
const calculateMatchScore = (movie, query) => {
  let score = 0
  
  // 标题匹配权重最高
  if (movie.title.toLowerCase().includes(query)) {
    score += 10
  }
  
  // 标签匹配权重较高
  if (movie.tags && movie.tags.some(tag => tag.toLowerCase().includes(query))) {
    score += 7
  }
  
  // 导演匹配权重适中
  if (movie.director.toLowerCase().includes(query)) {
    score += 5
  }
  
  // 主演匹配权重适中
  if (movie.actors && movie.actors.some(actor => actor.toLowerCase().includes(query))) {
    score += 5
  }
  
  // 描述匹配权重较低
  if (movie.description.toLowerCase().includes(query)) {
    score += 3
  }
  
  return score
}

// 生成AI电影推荐
const generateAIRecommendations = async () => {
  isLoadingRecommendations.value = true
  try {
    // 模拟AI处理延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    const allMovies = getAllVideos()
    
    // 随机选择一部电影作为基准（模拟用户偏好）
    const randomMovieIndex = Math.floor(Math.random() * allMovies.length)
    const baseMovie = allMovies[randomMovieIndex]
    
    // 生成AI分析
    aiAnalysis.value = {
      genreMatch: `${Math.floor(Math.random() * 20) + 80}%`,
      moodMatch: `${Math.floor(Math.random() * 15) + 75}%`,
      styleSimilarity: `${Math.floor(Math.random() * 30) + 60}%`,
      confidence: `${Math.floor(Math.random() * 10) + 90}%`,
      analysis: `基于当前流行趋势，AI分析显示您可能喜欢${baseMovie.tags?.join('、') || '类似风格'}的电影。`
    }
    
    // 基于多维度相似度推荐
    const recommended = allMovies
      .map(movie => {
        // 计算综合相似度
        const similarity = calculateMovieSimilarity(baseMovie, movie)
        return { ...movie, similarity }
      })
      .sort((a, b) => b.similarity - a.similarity)
      .slice(0, 6) // 取前6个推荐
    
    aiRecommendedMovies.value = recommended
  } catch (error) {
    console.error('生成推荐失败:', error)
  } finally {
    isLoadingRecommendations.value = false
  }
}

// 刷新推荐
const refreshRecommendations = () => {
  generateAIRecommendations()
}

// 计算电影相似度
const calculateMovieSimilarity = (movieA, movieB) => {
  let similarity = 0
  const totalFactors = 4 // 总共有4个因素
  
  // 1. 标签相似度 (权重 0.4)
  if (movieA.tags && movieB.tags) {
    const commonTags = movieA.tags.filter(tag => movieB.tags.includes(tag))
    const tagSimilarity = commonTags.length / Math.max(movieA.tags.length, movieB.tags.length)
    similarity += tagSimilarity * 0.4
  }
  
  // 2. 导演相似度 (权重 0.2)
  if (movieA.director === movieB.director) {
    similarity += 0.2
  }
  
  // 3. 评分相似度 (权重 0.2)
  const ratingA = parseFloat(movieA.rating) || 0
  const ratingB = parseFloat(movieB.rating) || 0
  const ratingDiff = Math.abs(ratingA - ratingB)
  const ratingSimilarity = Math.max(0, 1 - ratingDiff / 10)
  similarity += ratingSimilarity * 0.2
  
  // 4. 描述文本相似度 (简单实现) (权重 0.2)
  const descWordsA = new Set(movieA.description.toLowerCase().split(/\s+/))
  const descWordsB = new Set(movieB.description.toLowerCase().split(/\s+/))
  const commonWords = [...descWordsA].filter(word => descWordsB.has(word))
  const totalUniqueWords = new Set([...descWordsA, ...descWordsB]).size
  const textSimilarity = totalUniqueWords > 0 ? commonWords.length / totalUniqueWords : 0
  similarity += textSimilarity * 0.2
  
  return Math.round(similarity * 100)
}

// 组件挂载时生成AI推荐
onMounted(() => {
  generateAIRecommendations()
})
</script>

<style scoped>
/* 页面容器 */
.ai-recommendations-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* AI搜索区域 */
.ai-search-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ai-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

.ai-search-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.search-input-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  position: relative;
}

.ai-search-input {
  flex: 1;
  padding: 15px 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.ai-search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-btn {
  padding: 15px 30px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.search-btn:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.search-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 搜索结果 */
.search-results h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.search-result-card {
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.thumbnail-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}

.search-result-info {
  padding: 15px;
}

.search-result-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-director {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
}

.search-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tag {
  padding: 3px 10px;
  background: #e7f3ff;
  color: #007bff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.search-result-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.no-search-results {
  text-align: center;
  padding: 40px;
  color: #666;
}

/* AI推荐区域 */
.ai-recommendations-section {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  color: #007bff;
  border: 1px solid #007bff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover:not(:disabled) {
  background: #007bff;
  color: white;
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* AI分析摘要 */
.ai-analysis-summary {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ai-analysis-text {
  margin: 0 0 15px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.ai-summary-stats {
  display: flex;
  gap: 30px;
}

.ai-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ai-summary-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #007bff;
}

.ai-summary-stat .stat-label {
  font-size: 14px;
  color: #666;
}

/* 加载状态 */
.recommendations-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #666;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e1e5e9;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 推荐网格 */
.ai-recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.ai-recommendation-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ai-recommendation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.recommendation-thumbnail {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.similarity-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.recommendation-info {
  padding: 15px;
}

.recommendation-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommendation-director {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.recommendation-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
}

.recommendation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.no-recommendations {
  text-align: center;
  padding: 60px;
  color: #666;
}

.primary-btn {
  margin-top: 15px;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

/* 热门类别 */
.popular-categories {
  margin-bottom: 30px;
}

.popular-categories h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.category-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-recommendations-container {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .search-input-wrapper {
    flex-direction: column;
  }
  
  .search-btn {
    width: 100%;
  }
  
  .ai-recommendations-grid,
  .search-results-grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .ai-summary-stats {
    flex-direction: column;
    gap: 15px;
  }
}
</style>